// 1. 引入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 2. 注册路由模块
Vue.use(VueRouter)

// 统一解决编程式导航报错的问题
// 原型上修改push方法
const originPush = VueRouter.prototype.push // 先将之前的存储到一个变量当中
const originReplace = VueRouter.prototype.replace // 同上

// 修改VueRouter原型上的push 用于解决重复跳转时报错的问题
VueRouter.prototype.push = function(location, okCallBack, errCallBack) {
  if (okCallBack === undefined && errCallBack === undefined) {
    // 上面的判断成立的话，表示没有传递这两个参数
    originPush.call(this, location).catch(() => {}) // 统一处理报错的问题 一劳永逸
  } else {
    // 如果传了成功或是失败的回调，那么就以你传入的成功或是失败的回调为主
    originPush.call(this, location, okCallBack, errCallBack)
  }
}

// 修改VueRouter原型上的replace 用于解决重复跳转时报错的问题
VueRouter.prototype.replace = function(location, okCallBack, errCallBack) {
  if (okCallBack === undefined && errCallBack === undefined) {
    // 上面的判断成立的话，表示没有传递这两个参数
    originReplace.call(this, location).catch(() => {}) // 统一处理报错的问题 一劳永逸
  } else {
    originReplace.call(this, location, okCallBack, errCallBack)
  }
}

// 3. 创建路由对象
const router = new VueRouter({
// 4. 书写路由规则
  mode: 'history', // 不用hash模式，不想在浏览器地址栏中看到#
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 设置滚动行为的好处:
    // 1. 可以在跳转到新页面的时候，设置在哪个位置显示 一般是显示顶部
    // 2. 通过前进或后退按钮，可以记录之前页面的位置
    // return 期望滚动到哪个的位置
    // to: 表示要跳转到的页面
    // from: 表示跳转前的页面
    // savedPosition 是用来记录之前页面的位置信息的 通过浏览器的前进/后退按钮触发
    // console.log('scroll',to,from,savedPosition);
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

// 5. 导出路由对象
export default router
